<template>
  <div>
    <div class="header">
      <div class="title">中英连连看</div>
      <div class="score">当前得分: <span>{{ sumScore }}</span> </div>
      <div class="ps">落子无悔你只能配对一次不能修改！！！</div>
    </div>
    <div class="line-block">
      <!-- 英文区域 -->
      <div class="English">
        <div class="En-item" v-for="item in testNow"
        :key="item.wordindex"
        :class="{actItem:actEn===item.wordindex,
        notClick:usedEn.includes(item.wordindex)}"
        @click="getEn($event.target,item)">
          {{ item.wordname }}
        </div>
      </div>
      <!-- 中文区域 -->
      <div class="Chinese">
        <div class="Ch-item" v-for="item in chNow"
        :key="item.wordindex"
        :class="{notClick:usedCh.includes(item.wordindex)}"
        @click="setLine($event.target,item)">
          {{item.chineseExplain}}
        </div>
      </div>
    </div>
    <!-- 记录现在是第几页了 提升交互 -->
    <div class="indexcount">
       当前第{{ indexNow+1 }}组 共有{{ sumlun }}组
    </div>
  </div>
  <coursesFooter btn="test"></coursesFooter>
</template>
<script>
import coursesFooter from './courses-footer.vue'
import LeaderLine from 'leader-line'
import store from '@/store'
export default {
  name: 'test-meated',
  data () {
    return {
      // 记录错题
      errorWords: [],
      // 记录此时被点击的英文选择项目
      actEn: '',
      // 记录被点击过的，成线了的英文选项
      usedEn: [],
      // 记录点击过的，成线了的中文选项
      usedCh: [],
      // 一共有几轮
      sumlun: 0,
      // 记录已经测试的单词数目
      testedNum: 0,
      // 记录组数从测试词组中提取5个或者小于5个 存入然后v-for遍历渲染
      testNow: [],
      // 中文需要打乱顺序渲染所以新建一个数组
      chNow: [],
      // 记录当前第几轮
      indexNow: 0,
      // 一组有几个单词 默认为5 最后一组会有浮动
      nowNum: 5,
      // 测试的单词组
      testword: [],
      // 得分以词组形式返回 哪个词对了 哪个词没对
      score: [],
      // 存放变出来的线
      lineContainer: [],
      // 记录已经连了几根线，到>4重置
      lineIndex: 0,
      // 存放线的两个端点的dom节点
      EnAct: null,
      ChAct: null,
      // 记录选择的单词的信息
      Enele: null,
      Chele: null,
      // 线的样式
      styleOption: {
        color: 'gray', // 指引线颜色
        endPlug: 'hand', // 指引线结束点的样式 hand,disc
        size: 2, // 线条尺寸
        startSocket: 'right', // 在指引线开始的地方从元素左侧开始
        endSocket: 'left', // 在指引线开始的地方从元素右侧结束
        // hide: true, // 绘制时隐藏，默认为false，在初始化时可能会出现闪烁的线条
        // startPlugColor: '#ff3792', // 渐变色开始色
        // endPlugColor: '#fff386', // 渐变色结束色
        gradient: false, // 使用渐变色
        outLineColor: 'blue',
        path: 'straight', // straight,arc,fluid,magnet,grid
        // dash: {
        //   // 虚线样式
        //   animation: true // 让线条滚动起来
        // },
        hide: true
      }
    }
  },
  components: {
    coursesFooter
  },
  computed: {
    // 实时统计总得分
    sumScore () {
      let sum = 0
      for (let i = 0; i < this.score.length; i++) {
        sum = sum + this.score[i].point
      }
      return sum
    }
  },
  methods: {
    // 获取英文节点
    getEn (e, item) {
      // 赋值
      this.EnAct = e
      this.Enele = item
      this.actEn = item.wordindex
      // console.log(this.actEn)
    },
    // 获取中文节点 点击后触发创建连线 比较得分等事件
    setLine (e, item) {
      // console.log(this.EnAct)
      // 先点击英文后 才能出现线 生成线之后清除端点
      if (this.EnAct) {
        // 赋值
        this.ChAct = e
        this.Chele = item
        // 创建线条
        this.lineContainer[this.lineIndex] = new LeaderLine(this.EnAct, this.ChAct, this.styleOption)
        this.lineContainer[this.lineIndex].show()
        this.lineContainer[this.lineIndex].position()
        // 线条创建完毕后 清空端点 禁止使用过的英文端点 中文端点 二次使用
        this.usedEn.push(this.actEn)
        this.usedCh.push(item.wordindex)
        this.lineIndex++
        this.EnAct = null
        this.actEn = ''
        // 进行计算得分
        this.calculate()
      } else {
        this.ChAct = e
      }
      // 当出现的线条数 等于现在的上限 nowNum
      if (this.lineIndex === this.nowNum) {
        this.initLine()
      }
    },
    // js随机排序
    randomSort (arr) {
      const mixedArr = []
      while (arr.length > 0) {
        const rc = parseInt(Math.random() * arr.length)
        mixedArr.push(arr[rc])
        arr.splice(rc, 1)
      }
      return mixedArr
    },
    // 初始化线 顺带重新为 testNow 赋值
    initLine () {
      // 最多产生5条线 超过五条重置
      this.lineIndex = 0
      setTimeout(() => {
        // 将产生的线抹除
        for (let i = 0; i < this.lineContainer.length; i++) {
          this.lineContainer[i].hide()
        }
        // 将testNow数组中的内容更新
        // 1. 先将轮数 + 1
        this.indexNow = this.indexNow + 1
        // 2. 看看这一轮的单词是否小于5
        if (this.testword.length - this.indexNow * 5 < 5) {
          this.nowNum = this.testword.length - this.indexNow * 5
        } else {
          this.nowNum = 5
        }
        // 3.开始渲染
        if (this.nowNum === 5) {
          for (let i = this.indexNow * this.nowNum, t = 0; i < (this.indexNow + 1) * this.nowNum; i++, t++) {
            this.testNow[t] = this.testword[i]
          }
        } else if (this.nowNum > 0) {
          for (let i = this.indexNow * 5, t = 0; t < 5; i++, t++) {
            if (this.testword[i]) {
              this.testNow[t] = this.testword[i]
            } else {
              this.testNow.pop()
            }
          }
        } else {
          //
          // ----》》》出口出口
          //
          // 为0则跳出至结算页面 并清除所有虚线
          for (let i = 0; i < this.lineContainer.length; i++) {
            this.lineContainer[i].hide()
            this.testNow.pop()
          }
          // 记录错题
          this.score.forEach((item, index) => {
            // 将0分单词即 错词存入 错题集 再传入vuex
            if (item.point === 0) {
              this.errorWords.push(this.testword[index])
            }
          })
          this.$store.commit('courses/setErrorwords', this.errorWords)
          // 将成绩上传
          this.$store.commit('courses/setScore', this.score)
          // 答题完毕将获得的成绩传入vuex并跳转入成绩结算页面 query增加模块名称 告诉接口这是那一部分的成绩
          this.$router.push({ path: '/courses/point', query: { name: this.$route.query.name, index: this.$route.query.index, test: 'mate' } })
        }
        // 4.为 testNow 赋值结束后 接下来将testNow顺序打乱赋值给 chNow
        const temporaryArr = []
        for (let i = 0; i < this.nowNum; i++) {
          temporaryArr[i] = this.testNow[i]
        }
        this.chNow = this.randomSort(temporaryArr)
      }, 500)
    },
    // 计算得分
    calculate () {
      if (this.Enele.wordindex === this.Chele.wordindex) {
        const i = this.score.findIndex(x => x.wordindex === this.Enele.wordindex)
        this.score[i].point = 1
        this.Enele = null
        this.Chele = null
      }
    }
  },
  // 组件生成时 将选择的词赋值然后进行页面渲染
  created () {
    const { testSelection } = store.state.courses
    // console.log(testSelection)
    this.testword = testSelection
    this.sumlun = Math.ceil(this.testword.length / 5)
    if (this.testword.length < 5) {
      this.nowNum = this.testword.length
    }
    for (let i = 0; i < this.testword.length; i++) {
      this.score.push({
        wordindex: this.testword[i].wordindex,
        point: 0
      })
    }
    for (let i = 0; i < this.nowNum; i++) {
      this.testNow[i] = this.testword[i]
    }
    // console.log(this.testNow)
    // 4.为 testNow 赋值结束后 接下来将testNow顺序打乱赋值给 chNow
    // 创建临时数组
    const temporaryArr = []
    for (let i = 0; i < this.nowNum; i++) {
      temporaryArr[i] = this.testNow[i]
    }
    this.chNow = this.randomSort(temporaryArr)
    // console.log(this.score)
  },
  unmounted () {
    if (this.lineContainer.length === 0) {
      // console.log('没有生成虚线不需要清空')
    } else {
      // console.log(this.lineContainer)
      // console.log('生成了虚线需要清空')
      for (let i = 0; i < this.lineContainer.length; i++) {
        this.lineContainer[i].hide()
        this.testNow.pop()
      }
    }
  }
}
</script>
<style lang="less" scoped>
.line-block {
  margin: 0 auto;
  width: 600px;
  height: 360px;
  display: flex;
  justify-content: space-around;
  .English {

    width: 200px;
    height: 400px;
    display: flex;
    flex-direction: column;
    .En-item{
      cursor: pointer;
      margin: 0 auto;
      margin-top: 20px; ;
      height: 40px;
      width: 160px;
      background: rgb(239, 239, 239);
      border: 1px solid gray;
      text-align: center;
      line-height: 40px;
      border-radius: 10px;
    }
    //当前选择
    .actItem{
      background: linear-gradient(rgb(239, 239, 239), rgb(143, 143, 143));
    }
    //禁用点击
    .notClick{
      pointer-events: none;
    }
  }
  .Chinese {

    width: 200px;
    height: 400px;
    .Ch-item{
      cursor: pointer;
      margin: 0 auto;
      margin-top: 20px; ;
      height: 40px;
      width: 160px;
      background: rgb(239, 239, 239);
      border: 1px solid gray;
      text-align: center;
      line-height: 40px;
      border-radius: 10px;
      //超出行长显示省略号
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    //禁用点击
    .notClick{
      pointer-events: none;
    }
  }
  .iframe-block {
    margin-top: 50px;
  }
  .target {
    display: inline-block;
    background-color: #9ee7ea;
    padding: 12px;
  }

}
.indexcount{
  width: 100%;
  font-size: 10px;
  text-align: center;
  font-family: '钉钉进步体';
}

.header{
  height: 30px;
  line-height: 30px;
  width: 100%;
  .title{
    font-size: 16px;
    font-weight: 600;
    color: #000;
    font-family: '钉钉进步体';
    text-indent: 20px;
    width: 100px;
    float: left;
  }
  .score{
    color: #666;
    margin-left: 20px;
    float: left;
    span{
      color: #3e87e5;
    }
  }
  .ps{
    float: right;
    font-size: 10px;
    color: #666;
  }
}

</style>
